<template>
  <view class="pages">
    <custom-bar :title="title" @height="setNavHeight" isNavbarSlot>
      <template #navbar>
        <view class="navbar">
          <view class="search">
            <view class="label">搜索</view>
            <input
              class="search_input"
              :placeholder-style="{ color: 'orange' }"
              v-model="search"
              placeholder="请输入内容"
            />
          </view>
        </view>
      </template>
    </custom-bar>
    <view class="body">
      <view class="cu-list menu sm-border">
				<view class="cu-item arrow" @tap.stop.prevent="toMien">
					<view class="content">
						<text class="cuIcon-circlefill text-grey"></text>
						<text class="text-grey">我的</text>
					</view>
				</view>
				<view class="cu-item arrow" >
					<view class="content">
						<image src="/static/logo.png" class="png" mode="aspectFit"></image>
						<text class="text-grey">图片 + 标题</text>
					</view>
				</view>
				<view class="cu-item arrow" >
					<button class="cu-btn content" open-type="contact">
						<text class="cuIcon-btn text-olive"></text>
						<text class="text-grey">Open-type 按钮</text>
					</button>
				</view>
				<view class="cu-item arrow" >
					<navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
						<text class="cuIcon-discoverfill text-orange"></text>
						<text class="text-grey">Navigator 跳转</text>
					</navigator>
				</view>
				<view class="cu-item arrow" >
					<view class="content">
						<text class="cuIcon-emojiflashfill text-pink"></text>
						<text class="text-grey">头像组</text>
					</view>
					<view class="action">
						<view class="cu-avatar-group">
							<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
							<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
							<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
						</view>
						<text class="text-grey text-sm">4 人</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-btn text-green"></text>
						<text class="text-grey">按钮</text>
					</view>
					<view class="action">
						<button class="cu-btn round bg-green shadow">
							<text class="cuIcon-upload"></text> 上传</button>
					</view>
				</view>
				<view class="cu-item arrow" >
					<view class="content">
						<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
						<text class="text-grey">标签</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-orange light">音乐</view>
						<view class="cu-tag round bg-olive light">电影</view>
						<view class="cu-tag round bg-blue light">旅行</view>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-warn text-green"></text>
						<text class="text-grey">文本</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">小目标还没有实现！</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-infofill margin-right-xs"></text> 小目标还没有实现！</view>
					</view>
					<view class="action">
						<switch class="switch-sex checked skin"></switch>
					</view>
				</view>
			</view>
    </view>
    <view class="sundry">
      <image class="image" src="http://139.9.40.245/colors/8.png"></image>
      <image class="image" src="http://139.9.40.245/colors/17.png"></image>
      <image class="image" src="http://139.9.40.245/colors/22.png"></image>
      <image class="image" src="http://139.9.40.245/colors/24.png"></image>
    </view>
    <tab-bar></tab-bar>
  </view>
</template>

<script setup lang="ts">
import CustomBar from "@/components/CustomBar/CustomBar.vue";
import LxSwiper from "@/components/lxSwiper/lxSwiper.vue";
import TabBar from '@/components/TabBar/TabBar.vue'
import { onShow, onLoad } from "@dcloudio/uni-app";
import { ref, getCurrentInstance } from "vue";
const title = ref("Hello");
const search = ref("");
const navbarHeight = ref<number>(0);
const bannerList = ref<Array<any>>([]);
const { proxy } = getCurrentInstance() as any;
const setNavHeight = (height: number) => {
  navbarHeight.value = height;
  console.log("NavHeight", height);
};
proxy.$api.bannerApi({ type: 1 }).then((res: any) => {
  bannerList.value = res.data.list;
});
const toMien = () => {
  uni.navigateTo({
    url:'/pages/address/index?id=200'
  })
}
onLoad(()=> {
  console.log('onLoad')
})
</script>

<style lang="scss" scoped>
.pages {
  min-height: 100vh;
  width: 100%;
  background: url("http://139.9.40.245/colors/bg-top2.jpg") no-repeat top,
    url("http://139.9.40.245/colors/bg-bottom.jpg") no-repeat bottom, #ffffff;
  background-size: 100% 35%, 100% 16%;
  padding: 0 20rpx;
  .navbar {
    width: 100%;
    .search {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .label {
        margin:0 20rpx;
        color: #ffffff;
      }
      .search_input {
        height: 100%;
        width: 360rpx;
        border: 1rpx solid #ffffff;
        color: #ffffff;
        border-radius: 24rpx;
        padding: 6rpx 14rpx;
        font-size: 24rpx;
      }
    }
  }

  .header_info {
    padding-top: 20rpx;
    width: 710rpx;
    height: 454rpx;
  }

  .sundry {
    position: fixed;
    left: 0;
    bottom: 10rpx;
    width: 100%;
    height: 300rpx;
    pointer-events: none;

    $n: 4;
    $animationTime: 3;
    @for $i from 0 through $n {
      $delay: random($n);
      $x: random(100);
      $y: random(500);
      $randomAnimationTine: #{$animationTime + random(5) - 1}s;
      .image:nth-child(#{$i}) {
        position: absolute;
        right: 30rpx;
        bottom: 0rpx;
        width: 60rpx;
        height: 60rpx;
        transform: scale(0.5);
        animation: move-#{$i}
          $randomAnimationTine
          linear
          #{$delay *
          0.1s *
          -1}
          infinite;
      }

      @keyframes move-#{$i} {
        0% {
          opacity: 1;
          transform: scale(0.5);
          transform: translate(0, 0);
        }
        100% {
          opacity: 0.1;
          transform: scale(1);
          transform: translate(-#{$x}rpx, -#{$y}rpx);
        }
      }
    }
  }
}
</style>
